<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>产品名称</span>
              <el-input class="tel-value" v-model="params_list.name" placeholder="请输入产品名称"></el-input>
            </div>
            <div class="item-inline">
              <span>商品类型</span>
              <el-select class="tel-value" v-model="params_list.type" placeholder="请选择">
                <el-option v-for="(item,index) in types" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          服务单产品列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">添加产品</el-button>
            <el-button class="jx-btn" type="primary" @click="addPackage">添加套餐</el-button>
            <el-button class="jx-btn" type="primary" :loading="boo.isExport" @click="exportRow">{{boo.isExport ? '请稍后……' : '导出'}}</el-button>
          </div>
        </div>
        <el-table :data="servicelist" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="55" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="serviceProductImgUrl" label="产品图片" width="130" align="center">
            <template slot-scope="scope">
              <img class="logo" :src="scope.row.serviceProductImgUrl"/>
            </template>
          </el-table-column>
          <el-table-column prop="serviceProductNo" label="产品编码" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="serviceProductName" label="产品名称" width="150" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">{{scope.row.serviceProductName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="serviceProductLocationProvinceCity" label="适用地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="serviceProductPrice" label="采购价格" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shopCount" label="商家数量" align="center">
          </el-table-column>
          <el-table-column prop="shopProductCatalog" label="商品类型" align="center" >
          </el-table-column>
          <el-table-column prop="upStatus" label="状态" align="center">
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.upStatus == '上架'" @click="editRow(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="hiddenRow(scope.row)" type="text" size="small">{{scope.row.upStatus == '上架' ? '终止' : '恢复'}}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="servicelist.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 添加产品 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="80%">
      <div slot="title" class="header-title">
        <span class="title-name">{{currentRow.serviceProductId ? '编辑产品' : '添加产品'}}</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="110px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item_2">
              <div class="title">基本信息</div>
              <el-form-item label="关联类目：" prop="catalogId">
                <el-cascader
                  class="tel-value"
                  v-model="currentRow.catalogId"
                  :options="typelist"
                  :props="props"
                  :disabled="currentRow.serviceProductId"
                  @change="handleChange">
                </el-cascader>
              </el-form-item>
              <el-form-item label="产品类型：" prop="shopProductCatalog">
                <el-select class="tel-value" v-model="currentRow.shopProductCatalog" placeholder="请选择" :disabled="currentRow.serviceProductId">
                  <el-option v-for="(item,index) in types" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称：" prop="serviceProductName">
                <el-input class="tel-value" v-model="currentRow.serviceProductName" :disabled="currentRow.serviceProductId" placeholder="请输入产品名称"></el-input>
              </el-form-item>
              <el-form-item label="适用车系：" prop="suitCarSeries">
                <el-select class="tel-value" v-model="currentRow.suitCarSeries" placeholder="请选择" :disabled="currentRow.serviceProductId">
                  <el-option v-for="(item,index) in suitCarSeries" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item> 
              <el-form-item label="适用地区：" prop="serviceProductLocationProvinceCity">
                <el-cascader
                class="tel-value"
                v-model="currentRow.serviceProductLocationProvinceCity"
                :options="options"
                :disabled="currentRow.serviceProductId"
                :props="address_props"
                @change="handleChange">
              </el-cascader>
              </el-form-item> 
              <!-- <el-form-item label="报名条件：" prop="warehouse_num">
                <el-select class="tel-value" v-model="currentRow.item5" placeholder="请选择">
                  <el-option label="不限" value="1"></el-option>
                  <el-option label="其他" value="2"></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="产品规格：" prop="serviceProductSpec">
                <el-input class="tel-value" :disabled="currentRow.serviceProductId" v-model="currentRow.serviceProductSpec" placeholder="请输入产品规格"></el-input>
              </el-form-item>
            </div>
            <div class="item_2">
              <div class="title">产品清单</div>
              <div class="list">
                <div class="right">
                  <el-input class="tel-value" type="textarea" :disabled="currentRow.serviceProductId" row="3" v-model="currentRow.serviceProductList" placeholder="请输入产品清单"></el-input>
                </div>
              </div>
              <div class="title" style="margin-top: 35px;">服务说明</div>
              <div class="list" v-for="(item,index) in currentRow.serviceProductDesc" :key="index">
                <div class="right">
                  <el-input class="tel-value" :disabled="currentRow.serviceProductId" v-model="item.text" placeholder="请输入服务说明"></el-input>
                  <el-button v-if="!currentRow.serviceProductId" type="text" size="small" @click="addInfo">增加</el-button>
                  <el-button v-if="(currentRow.serviceProductDesc.length != 1) && (!currentRow.serviceProductId)" type="text" size="small" @click="deleteInfo(index)">删除</el-button>
                </div>
              </div>
              <div class="title" style="margin-top: 35px;">产品图片</div>
              <div class="list">
                <div class="right">
                  <el-upload
                    class="avatar-uploader jx-uploader"
                    name="imgFile"
                    :headers="headers"
                    :disabled="currentRow.serviceProductId"
                    :action="`${$api.common.upload}?catalog=product_supplier`"
                    :show-file-list="false"
                    :on-success="handleSuccess">
                    <img v-if="(currentRow.serviceProductImgUrl != '') && (currentRow.serviceProductImgUrl)" :src="currentRow.serviceProductImgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </div>
          </div>
          <div class="detail-item" style="margin-bottom: 10px">
            <div class="item">
              <div class="title">采购详情</div>
              <el-form-item label="采购价格：" prop="serviceProductPrice">
                <el-input v-model="currentRow.serviceProductPrice" :disabled="currentRow.serviceProductId" placeholder="请输入采购价格"></el-input>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container" v-if="!currentRow.serviceProductId">
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">生成产品</el-button>
      </div>
    </el-dialog>
    <!-- 添加模板 -->
    <vue-dailog :isopen="boo.showDetail" :item="currentRow2" @close="close"></vue-dailog>
	</div>
</template>

<script>
  // import vueDailog from './detail/supplier_dialog' 
	export default {
    components: {
      // vueDailog
      "vue-dailog": () => import('./detail/supplier_dialog')
    },
		data() {
			return {
        https: {
          list: this.$api.product.supplylist,
          common: this.$api.common,
          type: this.$api.setting.category.list,
          suitCarSeries: this.$api.setting.car.page,
        },
        boo: {
          loading: false,
          showDialog: false,
          showDetail: false,
          saveing: false,
        },
        headers: {
          'admin-auth-token': localStorage.getItem('ms_token') || ''
        },
        other: {
          allRow: 1,
        },
        servicelist: '',
        params_list: {
          page: 1,
          size: 10,
          type: '',
          name: '',
        },
        types: '',
        currentRow: {serviceProductDesc: [{text: ''}],},
        currentRow2: {serviceProductDesc: [{text: ''}],},
        options: '',
        props: {
          expandTrigger: 'click', 
          value: 'catalogId',
          label: 'catalogName',
        },
        rules: {
          catalogId: [{ required: true, message: '请选择关联类目', trigger: 'change' }],
          shopProductCatalog: [{ required: true, message: '请选择产品类型', trigger: 'change' }],
          serviceProductName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
          suitCarSeries: [{ required: true, message: '请选择适用车系', trigger: 'change' }],
          serviceProductLocationProvinceCity: [{ required: true, message: '请选择适用地区', trigger: 'change' }],
          serviceProductSpec: [{ required: true, message: '请输入产品规格', trigger: 'blur' }],
          serviceProductPrice: [{ required: true, message: '请输入采购价格', trigger: 'blur' }],
        },
        typelist: '',
        address_props: {
          expandTrigger: 'click', 
          value: 'field',
          label: 'field',
        },
        suitCarSeries: '',
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getDict('shopProductCatalog')
      _self.getAddress()
      _self.getType() // 获取关联类目
      _self.getCar() // 获取适用车系
    },
		methods: {
      getDict(type){
        let _self = this
        let params = {
          dictCode: type,
        }
        // 新建判断Map
        let actions = (i,list,)=>{
          return new Map([
            ['shopProductCatalog',()=>{
              _self.types = list
            }]
          ]).get(i).call(this)
        }
        let success = (res)=>{
          if(res.data.retCode == 1){
            actions(type,res.data.retObject)
          }else{
            _self.$message.error(res.data.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.dict, params, success) 
      },
      getAddress(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.options = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.common.address, {}, success) 
      },
      getType(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.typelist = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.type, {}, success) 
      },
      getCar(){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.suitCarSeries = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.suitCarSeries, {}, success) 
      },
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          serviceProductName: _self.params_list.name,
          shopProductCatalog: _self.params_list.type,
          orderBy: '',
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.servicelist = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
            // _self.servicelist.forEach(item => {
            //   item.serviceProductDesc.forEach(itm => {
            //   })
            // });
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.boo.showDialog = true
        _self.currentRow = {serviceProductDesc: [{text: ''}]}
      },
      handleSuccess(res){
        let _self = this
        if(!res) return
        if(res.retCode == 1){
          _self.currentRow.serviceProductImgUrl = res.retObject.defaultImgDetail.path
          _self.currentRow.serviceProductImgId = res.retObject.imgId
        }else{
          _self.$message.error(res.retMsg)
        }
      },
      // 添加套餐
      addPackage(){
        let _self = this
        _self.boo.showDetail = true
        _self.currentRow2 = {serviceProductDesc: [{text: ''}]}
      },
      // 关闭套餐
      close(boo, type){
        let _self = this
        _self.boo.showDetail = boo
        if(type == 'icon') return
        _self.getList()
      },
      exportRow(){},
      hiddenRow(item){
        let _self = this
        let params = {
          id: item.serviceProductId,
          status: item.upStatus == '上架' ? '下架' : '上架',
        }
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.put(_self.https.list.edit, params, success) 
      },
      editRow(item){
        let _self = this
        _self.currentRow = JSON.parse(JSON.stringify(item))
        if(item.isPackage){
          _self.boo.showDetail = true
          _self.currentRow2 = JSON.parse(JSON.stringify(item))
        }else {
          _self.boo.showDialog = true
        }
      },
      viewRow(item){
        let _self = this
        let params = {
          path: '/product/detail/supply_detail?id=',
          query: item.serviceProductId 
        }
        _self.$router.push(params.path + params.query)
      },
      addInfo(){
        let _self = this
        _self.currentRow.serviceProductDesc.push({
          'text': ''
        })
      },
      deleteInfo(index){
        let _self = this
        _self.currentRow.serviceProductDesc.splice(index,1)
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){ 
            if((_self.currentRow.serviceProductList == '') || (_self.currentRow.serviceProductList == undefined)) return _self.$message.error('请输入产品清单')
            if(_self.currentRow.serviceProductDesc[0].text == '') return _self.$message.error('请输入服务说明')
            if((_self.currentRow.serviceProductImgId == '') || (_self.currentRow.serviceProductImgId == undefined)) return _self.$message.error('请选择产品图片')
            let params = {
              catalogId: _self.currentRow.catalogId[1] || '',
              shopProductCatalog: _self.currentRow.shopProductCatalog,
              serviceProductImgId: _self.currentRow.serviceProductImgId,
              serviceProductName: _self.currentRow.serviceProductName,
              suitCarSeries: _self.currentRow.suitCarSeries,
              serviceProductLocationProvinceCity: _self.currentRow.serviceProductLocationProvinceCity,
              serviceProductSpec: _self.currentRow.serviceProductSpec,
              serviceProductList: _self.currentRow.serviceProductList,
              serviceProductDesc: JSON.stringify(_self.currentRow.serviceProductDesc),
              serviceProductPrice: _self.currentRow.serviceProductPrice,
            }    
            _self.boo.saveing = true
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList()
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
              _self.boo.showDialog = false
            }
            _self.$axios.post(_self.https.list.add, params, success)  
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 62px
  .jx-detail .detail-item .list span
    width: 75px
  .jx-table
    /deep/ .el-table__body td
      .cell
        height: auto
        line-height: auto
  .jx-detail .detail-item .right
    .tel-value 
      width: 220px
</style>
